<template>
  <a-modal
    class="preview-modal"
    :visible="visible"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    @cancel="closeModal(false)"
    width="450px"
  >
    <a-spin tip="Loading..." :spinning="tableLoading">
      <div class="statusIcon">
        <!-- <template v-if="!formData.returnGoodsStatus"> -->
        <template v-if="formData.orderStatus == 'ORDER_UN_EVALUATE'">
          <a-icon type="check-circle" theme="filled" class="icon1" />
          <div class="text">已核销</div>
        </template>
        <template v-if="formData.orderStatus == 'ORDER_LEFT_WAIT'">
          <a-icon type="check-circle" theme="filled" class="icon2" />
          <div class="text">待核销</div>
        </template>
        <template v-if="formData.orderStatus == 'ORDER_CANCEL'">
          <a-icon type="close-circle" theme="filled" class="icon3" />
          <div class="text">已取消</div>
        </template>
        <template v-if="formData.orderStatus == 'ORDER_CLOSE'">
          <a-icon type="check-circle" theme="filled" class="icon5" />
          <div class="text">已退款</div>
        </template>
        <template v-if="formData.orderStatus == 'ORDER_UNPAID'">
          <a-icon type="clock-circle" theme="filled" class="icon4" />
          <div class="text">待付款</div>
        </template>
        <!-- </template> -->
        <!-- <template v-else>
        <template v-if="formData.returnGoodsStatus == 'TO_AUDIT'">
          <a-icon type="clock-circle" theme="filled" class="icon4" />
          <div class="text">待审核</div>
        </template>
        <template v-else-if="formData.returnGoodsStatus == 'REVIEW_FAILED'">
          <a-icon type="close-circle" theme="filled" class="icon6" />
          <div class="text">已驳回</div>
        </template>
        <template v-else-if="formData.returnGoodsStatus == 'REFUND_FINISH'">
          <a-icon type="check-circle" theme="filled" class="icon5" />
          <div class="text">已退款</div>
        </template>
        <template v-else>
          <a-icon type="clock-circle" theme="filled" class="icon2" />
          <div class="text">退款中</div>
        </template>
      </template> -->
      </div>
      <div class="info">
        <div class="itemInfo">
          <div class="title">联系人</div>
          <div class="data">{{ orderInfo.userName }}</div>
        </div>
        <div class="itemInfo">
          <div class="title">联系方式</div>
          <div class="data">{{ orderInfo.userPhone }}</div>
        </div>
        <div class="itemInfo">
          <div class="title">活动名称</div>
          <div class="data">{{ orderInfo.goodsName }}</div>
        </div>
        <div class="itemInfo">
          <div class="title">订单编号</div>
          <div class="data">{{ orderInfo.orderGoodsNo }}</div>
        </div>
        <div class="itemInfo">
          <div class="title">创建时间</div>
          <div class="data">{{ orderInfo.createDate }}</div>
        </div>
        <template v-if="formData.orderStatus != 'ORDER_UNPAID'">
          <div class="itemInfo" v-if="formData.orderStatus != 'ORDER_CANCEL'">
            <div class="title">支付单号</div>
            <div class="data">{{ orderInfo.externalOrderNo }}</div>
          </div>
          <div class="itemInfo">
            <div class="title" v-if="formData.orderStatus != 'ORDER_CANCEL'">
              支付时间
            </div>
            <div class="data">{{ orderInfo.orderPayTime }}</div>
          </div>
          <div class="itemInfo" v-if="formData.orderStatus == 'ORDER_CANCEL'">
            <div class="title">取消时间</div>
            <div class="data">{{ orderInfo.cancelTime }}</div>
          </div>
          <div class="itemInfo" v-if="formData.orderStatus == 'ORDER_UN_EVALUATE'">
            <div class="title">核销时间</div>
            <div class="data">{{ orderInfo.orderFinshTime }}</div>
          </div>
        </template>
        <div class="itemInfo">
          <div class="title">关联导购</div>
          <div class="data">{{ orderInfo.guideName }}</div>
        </div>
        <div class="itemInfo" v-if="formData.orderStatus == 'ORDER_UN_EVALUATE'">
          <div class="title">核销导购</div>
          <div class="data">{{ orderInfo.cancelGuideName }}</div>
        </div>
      </div>
    </a-spin>

    <template slot="footer">
      <a-button key="back" @click="closeModal(false)"> 关闭 </a-button>
      <!-- <template
        v-if="
          formData.returnGoodsStatus && formData.returnGoodsStatus == 'TO_AUDIT'
        "
      >
        <a-button
          key="submit"
          type="primary"
          :loading="tableLoading"
          @click="agree"
          >通过</a-button
        >
        <a-button type="danger" :loading="tableLoading" @click="disagree">
          驳回
        </a-button>
      </template> -->
    </template>
  </a-modal>
</template>
<script>
export default {
  name: "orderDetails",
  props: {
    visible: {
      // 是否显示弹窗
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: {},
    },
    orderId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tableLoading: false,
      // formData: {},
      orderInfo: {},
    };
  },
  watch: {
    visible(y) {
      if (y) {
        this.getOrderInfo({ id: this.orderId });
        // console.log(this.formData);
      } else {
        // this.formData = {};
      }
    },
  },
  methods: {
    closeModal(bool) {
      this.$emit("cancel", bool);
    },
    //查询订单详情
    async getOrderInfo(params) {
      this.tableLoading = true;
      let res = await this.$get("order/goods/query", params).catch(() => {
        this.tableLoading = false;
      });
      if (res && res.returnCode == 1000) {
        this.orderInfo = res.dataInfo;
        this.tableLoading = false;
      } else {
        this.tableLoading = false;
      }
    },

    // 允许退款
    async confirmTK(params) {
      // 调仅退款的接口/order/goodsrepairs/agree/refund
      let res = await this.$post("/order/goodsrepairs/agree/refund", params);
      if (res && res.returnCode == 1000) {
        console.log(res);
      }
    },

    //调拒绝退款的接口
    async refuseTK(params) {
      let res = await this.$post("/refund/refused/refund", params);
      if (res && res.returnCode == 1000) {
        console.log(res);
      }
    },

    agree() {},
    disagree() {},
  },
};
</script>
<style lang="less" scoped>
/deep/.ant-modal-footer {
  display: flex;
  justify-content: center;
}
/deep/.ant-modal-footer button + button {
  margin-left: 30px;
}
.statusIcon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  .icon1 {
    font-size: 60px;
    color: #09bb07;
  }
  .icon2 {
    font-size: 60px;
    color: #ffbe00;
  }
  .icon3 {
    font-size: 60px;
    color: #ff3131;
  }
  .icon4 {
    font-size: 60px;
    color: #10aeff;
  }
  .icon5 {
    font-size: 60px;
    color: #10aeff;
  }
  .icon6 {
    font-size: 60px;
    color: #10aeff;
  }
  .text {
    margin-top: 5px;
    text-align: center;
  }
}
.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
  .itemInfo {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .title {
      width: 43%;
      text-align: right;
    }
    .data {
      width: 44%;
      text-align: left;
    }
  }
  .itemInfo + .itemInfo {
    margin-top: 7px;
  }
}
</style>